/*
 * @Date: 2023-04-18 16:26:16
 * @LastEditors: jacky02
 * @LastEditTime: 2023-04-24 10:04:29
 */
import { React, useEffect, useState } from "react";
import { Chart } from "@antv/g2";
import { Menu } from "antd";

export default function G2() {
  const [type, setType] = useState("lineView");
  const items = [
    {
      label: "折线视图",
      key: "lineView",
    },
    {
      label: "散点图",
      key: "pointChart",
    },
    {
      label: "分面复合图",
      key: "facetCom",
    },
    {
      label: "滑动动画",
      key: "animationView",
    },
    {
      label: "Zoom动画",
      key: "zoomIn",
    },
  ];

  function line(chart) {
    chart
      .line()
      .data({
        type: "fetch",
        value: "https://assets.antv.antgroup.com/g2/indices.json",
      })
      .transform({ type: "normalizeY", basis: "first", groupBy: "color" })
      .encode("x", (d) => new Date(d.Date))
      .encode("y", "Close")
      .encode("color", "Symbol")
      .axis("y", { title: "↑ Change in price (%)" })
      .label({
        text: "Symbol",
        selector: "last", // 选择最后一个
        style: {
          fontSize: 10,
        },
      });
    chart.render();
  }
  function zoomIn(chart) {
    chart
      .point()
      .data({
        type: "fetch",
        value:
          "https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json",
      })
      .encode("x", "GDP")
      .encode("y", "LifeExpectancy")
      .encode("color", "continent")
      .encode("size", "Population")
      .encode("shape", "point")
      .scale("size", { range: [4, 65] })
      .scale("y", { domain: [65, 90] })
      .style("fillOpacity", 0.3)
      .style("lineWidth", 1)
      .animate("enter", { type: "zoomIn", duration: 1000 });

    chart.render();
  }

  function pointChart(chart) {
    chart
      .point()
      .data({
        type: "fetch",
        value:
          "https://gw.alipayobjects.com/os/bmw-prod/56b6b137-e04e-4757-8af5-d75bafaef886.csv",
      })
      .encode("x", "date")
      .encode("y", "value")
      .encode("color", "value")
      .encode("shape", "point")
      .scale("color", {
        type: "sequential",
        palette: "rdBu",
        offset: (t) => 1 - t,
      })
      .style("stroke", "#000")
      .style("strokeOpacity", 0.2)
      .tooltip([
        { channel: "x", name: "year", valueFormatter: (d) => d.getFullYear() },
        { channel: "y" },
      ]);

    chart.lineY().data([0]).style("stroke", "#000").style("strokeOpacity", 0.2);

    chart.render();
  }
  function facetComposition(chart) {
    const facetRect = chart
      .facetRect()
      .attr("paddingBottom", 50)
      .data({
        type: "fetch",
        value: "https://assets.antv.antgroup.com/g2/anscombe.json",
      })
      // 将数据按照 series 字段划分成一个个子集，
      // 并且是 x 方向排列
      .encode("x", "series");

    facetRect
      .point()
      .attr("inset", 10)
      .encode("x", "x")
      .encode("y", "y")
      .style("stroke", "#000");
    chart.render();
  }
  function animation(chart) {
    chart
      .interval()
      .coordinate({
        transform: [{ type: "transpose" }], // 坐标系变换
      })
      .data([
        { name: "event planning", startTime: 1, endTime: 4 },
        { name: "layout logistics", startTime: 3, endTime: 13 },
        { name: "select vendors", startTime: 5, endTime: 8 },
        { name: "hire venue", startTime: 9, endTime: 13 },
        { name: "hire caterer", startTime: 10, endTime: 14 },
        { name: "hire event decorators", startTime: 12, endTime: 17 },
        { name: "rehearsal", startTime: 14, endTime: 16 },
        { name: "event celebration", startTime: 17, endTime: 18 },
      ])
      .encode("x", "name")
      .encode("y", ["endTime", "startTime"])
      .encode("color", "name")
      .encode("enterDuration", (d) => d.endTime - d.startTime) // 计算持续时间，并且编码
      .encode("enterDelay", "startTime"); // 指定出现的时间，并且编码
    chart.render();
  }
  function onClick({ key }) {
    setType(key);
  }
  useEffect(() => {
    //因为是实时render，每次数据变化便重绘，所以要放在dom渲染之后
    //如果放在之前的话Cannot read property 'appendChild' of null
    // 初始化图表实例
    const chart = new Chart({
      container: "container",
      theme: "classic",
      width: 1000, // 图表高度
      //   height: 800, // 图表宽度
    });
    // // 声明可视化
    switch (type) {
      case "zoomIn":
        zoomIn(chart);
        break;
      case "facetCom":
        facetComposition(chart);
        break;
      case "pointChart":
        pointChart(chart);
        break;
      case "animationView":
        animation(chart);
        break;
      case "lineView":
        line(chart);
        break;
      default:
        line(chart);
        break;
    }
  }, [type]);
  return (
    <div>
      <div className="menu">
        <Menu
          onClick={onClick}
          defaultSelectedKeys={["lineView"]}
          mode="horizontal"
          items={items}
        />
      </div>
      <div id="container"></div>
    </div>
  );
}
